<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="dream约文" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="baibox">
			<view class="title">
				退款原因
			</view>
			<!-- <input type="text" class="put" placeholder-class="font-gray" placeholder="请输入" v-model="form.refs_money_cont"> -->
			<textarea type="text" class="put" :auto-height="true" placeholder-class="font-gray" placeholder="请输入" v-model="form.refs_money_cont" maxlength="-1"></textarea>
			<view class="title">
				退款单量
			</view>
			<view class="display-flex order_num just-between">
				<view class="display-flex" @tap="showGender=true">
					<view class="centxt" :class="index == -1 ? 'font-gray' : ''">{{ index > -1 ? array[index] + '单' : '请选择'}}</view><text style="font-size: 24rpx;color: #999;" v-if="index > -1 && price">({{price*(index+1)}}币)</text>
				</view>
				
				<!-- <input type="text" class="put" placeholder-class="font-gray" placeholder="请输入" v-model="form.num" style="border-bottom: none;"> -->
				<text class="order_num_right" v-if="amount">共计金额{{amount}}币</text>
			</view>

			<view class="title pb20">
				凭证图片
				<text>{{form.refs_money_imgs.length}}/8</text>
			</view>
			<view class="imgView">
				<!-- <view v-for="(img,index) in form.refs_money_imgs" class="imgList">
					<image :src="img | formatImgUrl" mode="aspectFill" style="width: 190rpx;height: 190rpx;"></image>
					<view class="imgClose" @click="deletePic(index)">×</view>
				</view>
				<image :src="'/images/up.png' | formatImgUrl" mode="widthFix" style="width: 190rpx;height: 190rpx;"
					@click="onChooseImg" v-if="form.refs_money_imgs.length < 8"></image> -->
					
				<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="8" width="78" height="78" :action="uploadImgUrl" :fileList="form.refs_money_imgs" @afterRead='afterRead' @delete="deletePic">
				</u-upload>
			</view>
		</view>
		
		<view class="subbox" @click="show=true">
			提交
		</view>
		
		<view class="xuzhi-box">
			退款须知<br>
			1、当订单发生争议，可向写手提交退款申请，由写手选择是否退款及退款方式。<br>
			2、您可选择申请部分退款或全部退款。当写手已经开始创作时，可能会出现仅支持部分退款的情况，请与写手积极沟通，共同处理问题。<br>
			3、写手将在三天内处理退款，如超时未处理，订单将进入异常状态，平台会重点关注。<br>
			4、如无法协商解决订单争议，可到【我的】-【订单查询】选择该订单，在【更多操作】进行订单申诉。<br>
			5、写手同意退款后，相应退款金额将在一到三个工作日内退回您的账户粮币。<br>
			6、请阅读并同意<text @click.stop="goToxie">《平台约文服务协议及指南》</text>。
		</view>
		
		<u-popup :show="showGender" mode="bottom" @close="showGender=false">
			<view class="custom-bot">
				<view class="title">
					退款单量
				</view>
				<picker-view :value="genders" @change="changeGender" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in array" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
		
				<view class="marginBorder"></view>
				<view class="btn" @tap="showGender=false,index=genders[0]">
					确认选择
				</view>
			</view>
		</u-popup>
		
		<!-- 确认弹窗 -->
		<u-popup mode="center" :show="show">
			<view class="mask">
				<view class="matitle">
					<text>是否确定申请退款</text>
				</view>
				<view class="matxt">
					
				</view>
				<view class="quque">
					<view class="quli" @click="show = false">
						取消
					</view>
					<view class="quli quactive" @click="submit">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					refs_money_cont: '',
					num: '',
					refs_money_imgs: [],
					oid: ''
				},
				array: [],
				index: 0,
				amount: '',
				genders: [0],
				showGender: false,
				fileList2: [],
				price: '',
				show: false
			}
		},
		onLoad(e) {
			// #ifdef APP-PLUS
			this.index = -1
			// #endif
			if (e.oid) {
				this.form.oid = e.oid
				this.amount = e.amount || ''
				this.price = parseInt(e.price)
				let num = Number(e.orderNum)
				
				let array = []
				for(let i=0; i<num; i++){
					array.push(i+1)
				}
				this.array = array
				console.log(array);
			} else {
				this.$common.errorToShow('参数异常')
			}
		},
		methods: {
			changeGender(e){
				this.genders = e.detail.value
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			submit() {
				if(!this.form.refs_money_cont){
					this.$common.errorToShow('请输入退款原因')
					return
				}
				if(this.index == -1){
					this.$common.errorToShow('请输入退款单量')
					return
				}
				this.form.num = this.array[this.index]
				
				this.form.refs_money_imgs = this.fileList2
				
				this.$api.default.request('order/order_ref', this.form, 'POST', false).then((res) => {
					
					if (res.code == 1) {
						if(uni.getStorageSync('isShow')){
							uni.removeStorageSync('isShow')
						}
						
						this.$common.successToShow(res.msg, () => {
							// uni.navigateBack()
							
							uni.redirectTo({
								url: '/showcase/showcase/result'
							})
						})
					}
				})
			},
			// 删除图片
			deletePic(index) {
				this.form.refs_money_imgs.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			onChooseImg() {
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.refs_money_imgs.push(data)
					}
				}, 9)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.refs_money_imgs.length
				lists.map((item) => {
					this.form.refs_money_imgs.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.refs_money_imgs[fileListLen]
					this.form.refs_money_imgs.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.custom-bot {
		text-align: center;
		background-color: #fff;
		
		.title{
			padding: 20px 0;
			font-family: '思源黑体';
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
		}
	
		.picker-view {
			width: 750rpx;
			height: 200rpx;
		}
	
		.item {
			height: 34px;
			line-height: 34px;
			font-family: '思源黑体';
			font-size: 15px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.marginBorder{
			width: 100%;
			height: 10px;
			background: #F2F5F2;
		}
		
		.btn{
			margin: 10px auto;
			width: 315px;
			height: 40px;
			line-height: 40px;
			border-radius: 8px;
			background: #45C4B0;
			font-family: '思源黑体';
			font-size: 16px;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	.xuzhi-box {
		padding: 20rpx 60rpx;
		font-size: 20rpx;
		font-weight: normal;
		line-height: 28rpx;
		color: #999999;
	}
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		padding-top: 18rpx;

		.baibox {
			background-color: #ffffff;
			padding: 20rpx 30rpx 20rpx;
			margin-bottom: 20rpx;

			.title {
				padding-top: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				line-height: 40rpx;

				text {
					font-size: 24rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #999999;
					font-weight: 500;
					padding-left: 12rpx;
				}
			}

			.imgView {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.imgList:nth-child(3n) {
					margin-right: 0;
				}

				.imgList {
					position: relative;
					padding-bottom: 10rpx;
					margin-right: 31rpx;

					.imgClose {
						position: absolute;
						top: -8px;
						right: -8px;
						z-index: 1;
						width: 36rpx;
						height: 36rpx;
						background-color: #45C4B0;
						color: #fff;
						line-height: 36rpx;
						text-align: center;
						border-radius: 100px;
					}
				}

				.imgList:not(:first-child) {
					// margin-left: 15rpx;
				}
			}

			.pb20 {
				padding-bottom: 20rpx;
			}

			.put {
				width: 690rpx;
				font-size: 28rpx;
				color: #3d3d3d;
				padding: 8rpx 0 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			}

			.area {
				width: 610rpx;
				padding: 20rpx 8rpx;
				max-height: 500rpx;
				min-height: 200rpx;
				resize: none;
				font-size: 28rpx;
				color: #3d3d3d;
			}
		}

		.subbox {
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			opacity: 1;
			background: #45C4B0;
			text-align: center;
			margin: 0 auto;
			line-height: 86rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	.font-gray{
		color: #999999;
	}

	.order_num{
		width: 690rpx;
		font-size: 28rpx;
		color: #3d3d3d;
		padding: 8rpx 0 20rpx;
		border-bottom: 1px solid rgba(153, 153, 153, 0.1);
		
		.order_num_right{
			font-family: '思源黑体';
			font-size: 12px;
			color: #999999;
		}
	}
	
	.mask {
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding-top: 48rpx;
	
		.matitle {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-bottom: 6rpx;
			line-height: 46rpx;
		}
	
		.matxt {
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			letter-spacing: 0em;
			color: #999999;
			line-height: 34rpx;
			padding-bottom: 50rpx;
		}
	
		.quque {
			display: flex;
			align-items: center;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
	
			.quli {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
	
			.quactive {
				background: rgba(69, 196, 176, 0.05);
			}
		}
	}
</style>